<template>
	<view class="white-block">
		<input class="inputer" v-model="count" type="number" placeholder="请输入金额" @input="handleInput" />
		<view class="bottom-border"></view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const emit = defineEmits(['change'])

	const count = ref(0)

	const handleInput = (e)=>{
		count.value = Number(e.detail.value)
		emit('change', count.value)
	}
</script>

<style lang="less" scoped>
	.white-block{
		display: flex;
		flex-direction: column;
		.inputer{
			position: relative;
			height: 80rpx;
			padding-left: 80rpx;
			width: 100%;
			font-size: 48rpx;
			&::after{
				content: '￥';
				position: absolute;
				top: 50%;
				left: 40rpx;
				transform: translate(-50%, -50%);
				color: #000000;
			}
		}
		.bottom-border{
			width: 640rpx;
			height: 1px;
			border-bottom: 1px solid #EBEDF0;
		}
	}
</style>